<template>
  <tabbar>
    <tabbar-item v-for="(item, index) in tabbarList" :key="index" :link="item.link">
      <img slot="icon" :src="item.icon">
      <img slot="icon-active" :src="item.iconH">
      <span slot="label">{{item.title}}</span>
    </tabbar-item>
  </tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from 'vux'
const tabbarList = [
  {
    id: 0,
    title: '首页',
    icon: require('../assets/image/home.png'),
    iconH: require('../assets/image/home_h.png'),
    link: '/'
  },
  {
    id: 1,
    title: '期数',
    icon: require('../assets/image/periods.png'),
    iconH: require('../assets/image/periods_h.png'),
    link: '/Periods'
  },
  {
    id: 2,
    title: '投稿',
    icon: require('../assets/image/contribute.png'),
    iconH: require('../assets/image/contribute_h.png'),
    link: '/Contribute'
  }
]
export default {
  name: 'Tabar',
  components: {
    Tabbar,
    TabbarItem
  },
  data () {
    return {
      tabbarList
    }
  }
}
</script>
<style lang="less">
@header-background-color:#fff;
  .weui-tabbar {
    position: fixed !important;
  }
  .tabbar-icon img {
    width: 100%;
    height: auto;
  }
</style>
